<!DOCTYPE html>
<html>
	<head>
		<title>jFlickrFeed Plugin</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="all" /> 
		<link href="colorbox/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> 
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="colorbox/jquery.colorbox-min.js"></script>
		<script src="cycle/jquery.cycle.all.min.js"></script>
		<script src="jflickrfeed.min.js"></script>
		<script src="setup.js"></script>
	</head>
	<body>
		<div id="container">
			<h1>jFlickrFeed Plugin</h1>
			<p>This plugin makes it easy to pull Flickr feeds and display them on your site.  Below are some examples that can get you thinking about its possiblities.</p>
			
			
			<h3>Basic Use</h3>
			<p>The photos below are being pulled from Flickr using the jFlickrFeed plugin.  Here is the code that is being used:</p>
			<pre>$('#basicuse').jflickrfeed({
	limit: 14,
	qstrings: {
		id: '44802888@N04'
	},
	itemTemplate: 
	'&lt;li&gt;' +
		'&lt;a href="{{image_b}}"&gt;&lt;img src="{{image_s}}" alt="{{title}}" /&gt;&lt;/a&gt;' +
	'&lt;/li&gt;'
});</pre>
			<ul id="basicuse" class="thumbs"></ul>
			
			<h3>Use with ColorBox</h3>
			<p>We can use the callback to apply the colorbox plugin after the photos are loaded.</p>
			<pre>$('#cbox').jflickrfeed({
	limit: 14,
	qstrings: {
		id: '37304598@N02'
	},
	itemTemplate:
	'&lt;li&gt;' +
		'&lt;a rel="colorbox" href="{{image}}" title="{{title}}"&gt;' +
			'&lt;img src="{{image_s}}" alt="{{title}}" /&gt;' +
		'&lt;/a&gt;' +
	'&lt;/li&gt;'
}, function(data) {
	$('#cbox a').colorbox();
});
			</pre>
			<ul id="cbox" class="thumbs"></ul>
			
			<h3>Use with Cycle</h3>
			<p>Here is an example of how we can tweak the templates and make it work great with jQuery Cycle.</p>
			<pre>$('#cycle').jflickrfeed({
	limit: 14,
	qstrings: {
		id: '37304598@N02'
	},
	itemTemplate: '&lt;li&gt;&lt;img src="{{image}}" alt="" /&gt;&lt;div&gt;{{title}}&lt;/div&gt;&lt;/li&gt;'
}, function(data) {
	$('#cycle div').hide();
	$('#cycle').cycle({
		timeout: 5000
	});
	$('#cycle li').hover(function(){
		$(this).children('div').show();
	},function(){
		$(this).children('div').hide();
	});
});
	</pre>
			<ul id="cycle"></ul>
			
			<h3>Use Without Templates</h3>
			<p>It is also possible to use the plugin without the templating.  Instead it would be useful to use the individual item callback:</p>
			<pre>$('#nocallback').jflickrfeed({
	limit: 4,
	qstrings: {
		id: '37304598@N02'
	},
	useTemplate: false,
	itemCallback: function(item){
		$(this).append("&lt;li&gt;&lt;img src='" + item.image_m + "' alt=''/&gt;&lt;/li&gt;");
	}
});</pre>
			<ul id="nocallback" class="thumbs"></ul>
			
		</div>
	</body>
</html>